<template>
  <template v-for="(item, index) in menuList" :key="item.href">
    <a-sub-menu :key="item.href" v-if="item.children && item.children.length > 0">
      <template #icon>
        <AppstoreOutlined />
      </template>
      <template #title>{{ item.name }}</template>
      <my-sub-menu :menuList="item.children"></my-sub-menu>
    </a-sub-menu>
    <a-menu-item :key="item.href" v-else>{{ item.name }}</a-menu-item>
 </template>
</template>

<script>
import { MailOutlined, QqOutlined, AppstoreOutlined, SettingOutlined } from '@ant-design/icons-vue';
export default {
  name: 'my-sub-menu',
  components: {
    MailOutlined,
    QqOutlined,
    AppstoreOutlined,
    SettingOutlined,
  },
  props: {
    menuList: {
      type: Array,
      menuList: () => []
    }
  },
  setup({menuList}){
    return {
      menuList
    }

  }
}
</script>
